<template>
  <div class="wuziqi-container">
    <canvas id="canvas" @click="getit($event)"></canvas>
    <div @click="play" class="wuziqi-btn">点击开局</div>
    <div class="code-container">
      <pre v-highlightjs class="code-pre">
        <code class="javascript">
          import img1 from './../../assets/***.png'
          import img2 from './../../assets/***.png'

          export default {
            name: "wuziqi",
            data() {
              return {
                map: [],
                timer: null,
                black: new Image(),
                white: new Image(),
                i: 0
              }
            },
            mounted() {
              this.black.src = img1;
              this.white.src = img2
            },
            methods: {
              init() {
                for (let j = 0; j < 14; j++) {
                  this.map[j] = [];
                }
                for (let j = 0; j < 14; j++) {
                  for (let k = 0; k < 14; k++) {
                    this.map[j][k] = 0;
                  }
                }
                let canvas = document.getElementById("canvas");
                canvas.width = 600;
                canvas.height = 600;
                canvas.style.backgroundColor = '#d7c098';
                let ctx = canvas.getContext('2d');
                ctx.strokeStyle = '#fff';
                for (let i = 0; i < 15; i++) {
                  for (let j = 0; j < 15; j++) {
                    ctx.strokeRect(j * 40, i * 40, 40, 40);
                  }
                }
              },
              getit(ev) {
                let canvas = document.getElementById("canvas");
                let ctx = canvas.getContext('2d');
                let e = event || ev;
                let x = Math.round((e.layerX) / 40);
                let y = Math.round((e.layerY) / 40);
                if (x === 0 || y === 0)
                  return;
                if (this.i % 2 === 0 && this.map[x - 1][y - 1] === 0) {
                  ctx.drawImage(this.black, x * 40 - 20, y * 40 - 20, 40, 40);
                  this.map[x - 1][y - 1] = 1;
                  this.i++;
                }
                if (this.i % 2 === 1 && this.map[x - 1][y - 1] === 0) {
                  ctx.drawImage(this.white, x * 40 - 20, y * 40 - 20, 40, 40);
                  this.map[x - 1][y - 1] = 2;
                  this.i++;
                }
              },
              play() {
                clearInterval(this.timer);
                this.init();
                this.timer = setInterval(() => {
                  for (let i = 0; i < 14; i++) {
                    for (let j = 0; j < 14; j++) {
                      if (this.map[i][j] !== 0) {
                        if (this.check_win(i, j)) {
                          if (this.map[i][j] === 1) {
                            clearInterval(this.timer);
                            let msg = "黑子赢了,是否继续？";
                            if (confirm(msg)) {
                              this.play();
                            } else {
                              return;
                            }
                          }
                          if (this.map[i][j] === 2) {
                            clearInterval(this.timer);
                            let msg = "白子赢了,是否继续？";
                            if (confirm(msg)) {
                              this.play();
                            } else {
                              return;
                            }
                          }
                        }
                      }
                    }
                  }
                }, 100);
              },
              check_win(m, n) {
                let total = 1;
                let i;
                //横向
                for (i = m - 1; i >= 0; i--)//统计同行左侧连续同样棋子个数。
                  if (this.map[i][n] === this.map[m][n]) total++;
                  else break;
                for (i = m + 1; i < 14; i++)//统计同行右侧连续同样棋子个数。
                  if (this.map[i][n] === this.map[m][n]) total++;
                  else break;
                if (total >= 5)
                  return 1;//胜利
                total = 1;
                //纵向
                for (i = n - 1; i >= 0; i--)//统计同行左侧连续同样棋子个数。
                  if (this.map[m][i] === this.map[m][n]) total++;
                  else break;
                for (i = n + 1; i < 14; i++)//统计同行右侧连续同样棋子个数。
                  if (this.map[m][i] === this.map[m][n]) total++;
                  else break;
                if (total >= 5)
                  return 1;//胜利。
                total = 1;
                let j = 0;
                for (i = m - 1, j = n - 1; j >= 0 && i >= 0; i--, j--)//统计同行左侧连续同样棋子个数。
                  if (this.map[i][j] === this.map[m][n]) total++;
                  else break;
                for (i = m + 1, j = n + 1; i < 14 && j < 14; i++, j++)//统计同行右侧连续同样棋子个数。
                  if (this.map[i][j] === this.map[m][n]) total++;
                  else break;
                if (total >= 5)
                  return 1;
                total = 1;
                for (i = m + 1, j = n - 1; j >= 0 && i < 14; i++, j--)//统计同行左侧连续同样棋子个数。
                  if (this.map[i][j] === this.map[m][n]) total++;
                  else break;
                for (i = m - 1, j = n + 1; i >= 0 && j < 14; i--, j++)//统计同行右侧连续同样棋子个数。
                  if (this.map[i][j] === this.map[m][n]) total++;
                  else break;
                if (total >= 5)
                  return 1;
                return 0; //没有胜利。
              }
            },
            beforeDestroy() {
              clearInterval(this.timer);
            }
          }
        </code>
      </pre>
    </div>
  </div>
</template>

<script>
  import img1 from './../../assets/logo.png'
  import img2 from './../../assets/yh.png'

  export default {
    name: "wuziqi",
    data() {
      return {
        map: [],
        timer: null,
        black: new Image(),
        white: new Image(),
        i: 0
      }
    },
    mounted() {
      this.black.src = img1;
      this.white.src = img2
    },
    methods: {
      init() {
        for (let j = 0; j < 14; j++) {
          this.map[j] = [];
        }
        for (let j = 0; j < 14; j++) {
          for (let k = 0; k < 14; k++) {
            this.map[j][k] = 0;
          }
        }
        let canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.backgroundColor = '#d7c098';
        let ctx = canvas.getContext('2d');
        ctx.strokeStyle = '#fff';
        for (let i = 0; i < 15; i++) {
          for (let j = 0; j < 15; j++) {
            ctx.strokeRect(j * 40, i * 40, 40, 40);
          }
        }
      },
      getit(ev) {
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        let e = event || ev;
        let x = Math.round((e.layerX) / 40);
        let y = Math.round((e.layerY) / 40);
        if (x === 0 || y === 0)
          return;
        if (this.i % 2 === 0 && this.map[x - 1][y - 1] === 0) {
          ctx.drawImage(this.black, x * 40 - 20, y * 40 - 20, 40, 40);
          this.map[x - 1][y - 1] = 1;
          this.i++;
        }
        if (this.i % 2 === 1 && this.map[x - 1][y - 1] === 0) {
          ctx.drawImage(this.white, x * 40 - 20, y * 40 - 20, 40, 40);
          this.map[x - 1][y - 1] = 2;
          this.i++;
        }
      },
      play() {
        clearInterval(this.timer);
        this.init();
        this.timer = setInterval(() => {
          for (let i = 0; i < 14; i++) {
            for (let j = 0; j < 14; j++) {
              if (this.map[i][j] !== 0) {
                if (this.check_win(i, j)) {
                  if (this.map[i][j] === 1) {
                    clearInterval(this.timer);
                    let msg = "黑子赢了,是否继续？";
                    if (confirm(msg)) {
                      this.play();
                    } else {
                      return;
                    }
                  }
                  if (this.map[i][j] === 2) {
                    clearInterval(this.timer);
                    let msg = "白子赢了,是否继续？";
                    if (confirm(msg)) {
                      this.play();
                    } else {
                      return;
                    }
                  }
                }
              }
            }
          }
        }, 100);
      },
      check_win(m, n) {
        let total = 1;
        let i;
        //横向
        for (i = m - 1; i >= 0; i--)//统计同行左侧连续同样棋子个数。
          if (this.map[i][n] === this.map[m][n]) total++;
          else break;
        for (i = m + 1; i < 14; i++)//统计同行右侧连续同样棋子个数。
          if (this.map[i][n] === this.map[m][n]) total++;
          else break;
        if (total >= 5)
          return 1;//胜利
        total = 1;
        //纵向
        for (i = n - 1; i >= 0; i--)//统计同行左侧连续同样棋子个数。
          if (this.map[m][i] === this.map[m][n]) total++;
          else break;
        for (i = n + 1; i < 14; i++)//统计同行右侧连续同样棋子个数。
          if (this.map[m][i] === this.map[m][n]) total++;
          else break;
        if (total >= 5)
          return 1;//胜利。
        total = 1;
        let j = 0;
        for (i = m - 1, j = n - 1; j >= 0 && i >= 0; i--, j--)//统计同行左侧连续同样棋子个数。
          if (this.map[i][j] === this.map[m][n]) total++;
          else break;
        for (i = m + 1, j = n + 1; i < 14 && j < 14; i++, j++)//统计同行右侧连续同样棋子个数。
          if (this.map[i][j] === this.map[m][n]) total++;
          else break;
        if (total >= 5)
          return 1;
        total = 1;
        for (i = m + 1, j = n - 1; j >= 0 && i < 14; i++, j--)//统计同行左侧连续同样棋子个数。
          if (this.map[i][j] === this.map[m][n]) total++;
          else break;
        for (i = m - 1, j = n + 1; i >= 0 && j < 14; i--, j++)//统计同行右侧连续同样棋子个数。
          if (this.map[i][j] === this.map[m][n]) total++;
          else break;
        if (total >= 5)
          return 1;
        return 0; //没有胜利。
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }
</script>

<style scoped>
  .wuziqi-container {
  }
  .wuziqi-btn{
    width: 120px;
    height: 30px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    text-align: center;
    border-radius: 6px;
  }
  .code-container {
    max-width: 1000px;
  }
</style>
